@import "../common/vars.scss";
@import "../mixins/mixins.scss";
//隐藏原始
select{
    display: none;
}
@include create(select){
    display: inline-block;
    position: relative;
    .aiui-input-inner {
        cursor: pointer;
        padding-right: 35px;
    }

    .aiui-select-caret{
        color: $color-text-placeholder;
        font-size: $font-size-base;
        transition: transform .3s;
        transform: rotate(0deg);
        cursor: pointer;
    }

    @include when(focus){
        .aiui-input-inner{
            border-color: $color-primary;
        }
        .aiui-icon-down{
            transform: rotate(-180deg);
        }
    }
    @include when(disabled){
        &:focus {
            outline: none;
            border-color: $input-focus-border;
        }
    }

    @include e(tags) {
        position: absolute;
        line-height: normal;
        white-space: normal;
        z-index: $index-normal;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
    
      .aiui-tag-close {
        margin-top: -2px;
      }
    
      .aiui-tag {
        box-sizing: border-box;
        border-color: transparent;
        margin: 2px 0 2px 6px;
        background-color: #f0f2f5;
    
        &-close.aiui-icon-close {
          background-color: $color-text-placeholder;
          right: -7px;
          top: 0;
          color: $color-white;
    
          &:hover {
            background-color: $color-text-secondary;
          }
    
          &::before {
            display: block;
            transform: translate(0, .5px);
          }
        }
    }
}




@include create(tag){
    background-color: $tag-fill;
    display: inline-block;
    padding: $tag-padding;
    height: 32px;
    line-height: 30px;
    font-size: $tag-font-size;
    color: $tag-color;
    border-radius: $tag-border-radius;
    box-sizing: border-box;
    border: 1px solid $tag-border;
    white-space: nowrap;

    .aiui-icon-close {
        border-radius: 50%;
        text-align: center;
        position: relative;
        cursor: pointer;
        font-size: 12px;
        height: 16px;
        width: 16px;
        line-height: 16px;
        vertical-align: middle;
        top: -1px;
        right: -5px;
        color: $tag-color;
        &::before {
          display: block;
        }
        &:hover {
          background-color: $tag-color;
          color: $color-white;
        }
    }

    @include m(info) {
        background-color: $tag-info-fill;
        border-color: $tag-info-border;
        color: $tag-info-color;
    
        @include when(hit) {
          border-color: $tag-info-color;
        }
    
        .aiui-tag-close {
          color: $tag-info-color;
        }
    
        .aiui-tag-close:hover {
          background-color: $tag-info-color;
          color: $color-white;
        }
      }
    
      @include m(success) {
        background-color: $tag-success-fill;
        border-color: $tag-success-border;
        color: $tag-success-color;
    
        @include when(hit) {
          border-color: $tag-success-color;
        }
    
        .aiui-tag-close {
          color: $tag-success-color;
        }
    
        .aiui-tag-close:hover {
          background-color: $tag-success-color;
          color: $color-white;
        }
      }
    
      @include m(warning) {
        background-color: $tag-warning-fill;
        border-color: $tag-warning-border;
        color: $tag-warning-color;
    
        @include when(hit) {
          border-color: $tag-warning-color;
        }
    
        .aiui-tag-close {
          color: $tag-warning-color;
        }
    
        .aiui-tag-close:hover {
          background-color: $tag-warning-color;
          color: $color-white;
        }
      }
    
      @include m(danger) {
        background-color: $tag-danger-fill;
        border-color: $tag-danger-border;
        color: $tag-danger-color;
    
        @include when(hit) {
          border-color: $tag-danger-color;
        }
    
        .aiui-tag-close {
          color: $tag-danger-color;
        }
    
        .aiui-tag-close:hover {
          background-color: $tag-danger-color;
          color: $color-white;
        }
    }
    @include m(small) {
        height: 24px;
        padding: 0 8px;
        line-height: 22px;
    
        .aiui-icon-close {
          transform: scale(.8);
        }
    }
}